<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Register</title>

    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.4.1/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
    <link href="https://cdn.90so.net/layui/2.4.5/css/layui.css" th:href="@{/webjars/layui/css/layui.css}" rel="stylesheet">
    <link href="../../static/css/register.css" th:href="@{/css/register.css}" rel="stylesheet" type="text/css">

    <script type="text/javascript" src="https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js" th:src="@{/webjars/jquery/jquery.min.js}"></script>
    <script type="text/javascript" src="https://cdn.staticfile.org/twitter-bootstrap/3.4.1/js/bootstrap.min.js" th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
    <script type="text/javascript" src="https://cdn.staticfile.org/store.js/1.3.20/store.min.js" th:src="@{/webjars/store.js/store.min.js}"></script>
    <script type="text/javascript" src="https://cdn.staticfile.org/moment.js/2.24.0/moment.min.js" th:src="@{/webjars/momentjs/min/moment.min.js}"></script>
    <script type="text/javascript" src="https://cdn.90so.net/layui/2.4.5/layui.all.js" th:src="@{/webjars/layui/layui.all.js}"></script>
    <script type="text/javascript" src="../../static/js/common.js" th:src="@{/js/common.js}"></script>
    <script type="text/javascript" src="../../static/js/user.js" th:src="@{/js/user.js}"></script>
</head>

<body>
<div class="login">
    <div id="logo-div-id"></div>
    <div class="login-wrapper">
        <div class="login-box login-register">
            <div class="login-box-inner">
                <form id="register-form" action="" method="post">
                    <p></p>
                    <div class="login-group">
                        <label for="register-username"><span style="margin-right: 5px;font-size: 12px;color: red;">*</span>用户名</label>
                        <input id="register-username" type="text" name="username" autocomplete="username" class="login-input">
                    </div>
                    <div class="login-group">
                        <label for="register-email"><span style="margin-right: 5px;font-size: 12px;color: red;">*</span>邮箱</label>
                        <input id="register-email" type="email" autocomplete="email" name="email" class="login-input">
                    </div>
                    <div class="login-group">
                        <label for="register-password"><span style="margin-right: 5px;font-size: 12px;color: red;">*</span>密码</label>
                        <input id="register-password" type="password" name="password" autocomplete="current-password" class="login-input">
                    </div>
                    <div class="login-group">
                        <label for="register-repassword"><span style="margin-right: 5px;font-size: 12px;color: red;">*</span>重复密码</label>
                        <input id="register-repassword" type="password" name="repassword" autocomplete="re-password" class="login-input">
                    </div>
                    <div class="login-group">
                        <label for="register-phoneNumber"><span style="margin-right: 5px;font-size: 12px;color: red;">*</span>电话号码</label>
                        <input id="register-phoneNumber" type="text" name="phoneNumber" autocomplete="phone-number" class="login-input">
                    </div>
                    <button id="register-btn" class="login-btn">
                        注册
                    </button>

                    <div class="text-foot">
                        已有账号? <a href="#" th:href="@{/v1/monitoring-system/users/page/login}" class="login-link">登录</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div id="footer-div-id"></div>
</div>

<script type="text/javascript">

    window.onload = function (ev) {

        // 页面初始化
        pageAfterOnloadInit();

        // 添加注册用户名检测事件
        document.getElementById('register-username').onblur = function (ev1) {
            checkUsernameAndTip('register-username');
        };

        // 添加注册邮箱检测事件
        document.getElementById('register-email').onblur = function (ev1) {
            checkEmailAndTip('register-email');
        };

        // 添加注册密码检测事件
        document.getElementById('register-password').onblur = function (ev1) {
            checkPasswordAndTip('register-password');
        };

        // 添加重复密码检测事件
        document.getElementById('register-repassword').onblur = function (ev1) {
            checkRepasswordAndTip('register-password', 'register-repassword');
        };

        // 注册电话号码检测事件
        document.getElementById('register-phoneNumber').onblur = function (ev1) {
            checkPhoneNumberAndTip('register-phoneNumber');
        };

        // 添加注册按钮事件
        document.getElementById('register-btn').onclick = registerFormSubmitEvent;
    };

</script>



<script type="text/javascript">

    //////////////// function defined ///////////////////////////////

    // 页面初始化
    function pageAfterOnloadInit() {
        initUserModelLogoDiv();
        initUserModelFooterDiv();
    }

    // 注册表单提交
    function registerFormSubmitEvent() {
        if (checkUsernameAndTip('register-username') && checkEmailAndTip('register-email')
            && checkPasswordAndTip('register-password') && checkRepasswordAndTip('register-password', 'register-repassword')
            && checkPhoneNumberAndTip('register-phoneNumber')) {

            // 发送注册请求
            $.ajax({
                url: USER_BASE_MAPPING_V1 + "/add",
                type: "post",
                async: false,
                data: {
                    username: $("#register-username").val(),
                    email: $("#register-email").val(),
                    password: $("#register-password").val(),
                    repassword: $("#register-repassword").val(),
                    phoneNumber: $("#register-phoneNumber").val()
                },
                success: function (result, status, xhr) {
                    var obj = JSON.parse(result);
                    var code = obj.code;
                    var message = obj.message;
                    var data = obj.data;
                    if (code !== 200) {
                        kingLayerMsg(message, userDefaultLayerMsgOptions);
                    } else {
                        // 向 store 中保存用户信息
                        setValueToStore(LOGIN_USER_KEY, data);

                        // 提示激活信息
                        kingLayerMsg("注册成功，请您先激活！", userDefaultLayerMsgOptions);

                        // 先等待激活的信息提示结束，然后再跳转到激活页面
                        setTimeout(function () {
                            window.location.href = USER_BASE_MAPPING_V1 + "/page/activation";
                        }, SLEEP_TIME);
                    }
                }
            });

        }
        // 这个返回值可以使页面不刷新
        return false;
    }

</script>
</body>
</html>